<script setup lang="ts">
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import type { TableInstance } from 'element-plus'
import http from '@/http'
import { onMounted, reactive, ref } from 'vue'
import Cookies from 'universal-cookie'
import { useUserStore } from '@/stores/user'
import { pa, tr } from 'element-plus/es/locale'
import Index from './Index.vue'
interface User {
  id: number
  date: string
  name: string
  address: string
}
const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])
const selectable = (row: User) => ![1, 2].includes(row.id)
const toggleSelection = (rows?: User[], ignoreSelectable?: boolean) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(
        row,
        undefined,
        ignoreSelectable
      )
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
let pageNum = ref(1)
let pageSize = ref(8)
const tableData = ref()
const form = reactive({
  producterName: '',
  keywords: '',
  producterTel: '',
  status: '',
  createTime: '',
  producterCode: '',
  producterPerson: '',
  producterAddress: '',
  producterId: '',
  updateTime: '',
  createBy: '',
  updateBy: ''
})
const formm = reactive({
  producterName: '',
  keywords: '',
  producterTel: '',
  status: '',
  createTime: '',
  producterCode: '',
  producterPerson: '',
  producterAddress: '',
  producterId: '',
  updateTime: '',
  createBy: '',
  updateBy: ''
})
function reset() {
  form.producterName = '',
    form.keywords = '',
    form.producterTel = '',
    form.status = '',
    form.createTime = ''
}
// 查询
function select() {
  http.get("/sp/page", {
    params: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      producterName: form.producterName,
      keywords: form.keywords,
      producterTel: form.producterTel,
      status: form.status,
      createTime: form.createTime
    }
  }).then((ref) => {
    tableData.value = ref.list
    total.value = ref.total
  })
}
onMounted(() => {
  select()
})
//当前页发生改变
const handleCurrentChange = (val: number) => {
  pageNum.value = val
  //获取当前页的数据
  select()
}
let total = ref();
// 修改
const dialogFormVisible = ref(false)
const update = (Index: number, row) => {
  formm.producterName = row.producterName
  formm.keywords = row.keywords
  formm.producterTel = row.producterTel
  formm.status = row.status
  formm.createTime = row.createTime
  formm.producterCode = row.producterCode
  formm.producterPerson = row.producterPerson
  formm.producterAddress = row.producterAddress
  formm.producterId = row.producterId
  const now=new Date()
  const year = now.getFullYear();
  const month = ('0' + (now.getMonth() + 1)).slice(-2);
  const day = ('0' + now.getDate()).slice(-2);
  const hours = ('0' + now.getHours()).slice(-2);
  const minutes = ('0' + now.getMinutes()).slice(-2);
  const seconds = ('0' + now.getSeconds()).slice(-2);
  const formattedTime = year + '-' + month + '-' + day + '-' + hours + '-' + minutes + '-' + seconds;
  formm.updateTime = formattedTime;
  const userStore = useUserStore()
  const user = userStore.getUser.value
  formm.updateBy = user.userName
  dialogFormVisible.value=true
}
const ii=ref()
const formLabelWidth = '200px'
function up(){
  http.post('/sp/update',formm).then((ref)=>{
    ii.value=ref
  })
  dialogFormVisible.value=false
  window.location.reload();
}
// 添加前的条件
function tiaojian(){
  if(formm.producterName ==null || formm.producterName ==''){
    kong.producterName=weikong
  }
  if(formm.producterCode ==null || formm.producterCode ==''){
    kong.producterCode=weikong
  }
  if(formm.producterPerson ==null || formm.producterPerson ==''){
    kong.producterPerson=weikong
  }
  if(formm.producterTel ==null || formm.producterTel ==''){
    kong.producterTel=weikong
  }
  if(formm.keywords ==null || formm.keywords ==''){
    kong.keywords=weikong
  }
  if(formm.producterAddress ==null || formm.producterAddress ==''){
    kong.producterAddress=weikong
  }
  if(formm.status ==null || formm.status ==''){
    kong.status=zhuangkong
  }
if(formm.producterName !=null && formm.producterName !='' && formm.producterCode !=null && formm.producterCode !='' && formm.producterPerson !=null && formm.producterPerson !='' && formm.producterTel !=null && formm.producterTel !='' && formm.keywords !=null && formm.keywords !='' && formm.producterAddress !=null && formm.producterAddress !='' && formm.status !=null && formm.status !=''){
  tianjia()
}
}
// 取消为空
function qvxiao(){
  kong.producterName= ''
  kong.keywords= ''
  kong.producterTel= ''
  kong.status= ''
  kong.producterCode= ''
  kong.producterPerson= ''
  kong.producterAddress= ''
  tian.value=false
}
// 添加
function tianjia(){
  const now=new Date()
  const year = now.getFullYear();
  const month = ('0' + (now.getMonth() + 1)).slice(-2);
  const day = ('0' + now.getDate()).slice(-2);
  const hours = ('0' + now.getHours()).slice(-2);
  const minutes = ('0' + now.getMinutes()).slice(-2);
  const seconds = ('0' + now.getSeconds()).slice(-2);
  const formattedTime = year + '-' + month + '-' + day + '-' + hours + '-' + minutes + '-' + seconds;
  formm.createTime = formattedTime;
  const userStore = useUserStore()
  const user = userStore.getUser.value
  formm.createBy = user.userName
  formm.updateTime=null
  if(formm.producterName!=null){
    http.post('/sp/insert',formm).then((ref)=>{
    ii.value=ref
  })
  tian.value=false

  if(ii.value='1'){
    ti.value='添加成功'
  }else{
    ti.value='添加失败'
  }
  }
  open()
  qvxiao()
}
const ti=ref()
const tian=ref(false)
function tiann(){
  formmnull()
  tian.value=true
}
// 重置内容
function formmnull(){
  formm.producterName = ''
  formm.keywords = ''
  formm.producterTel = ''
  formm.status = ''
  formm.createTime = ''
  formm.producterCode = ''
  formm.producterPerson = ''
  formm.producterAddress = ''
  formm.producterId = ''
  formm.createTime = ''
  formm.updateTime= ''
  formm.updateBy= ''
  formm.createBy= ''

}
// 提示字
const weikong='输入不能为空'
const zhuangkong='状态不能为空'
const kong=reactive({
  producterName: '',
  keywords: '',
  producterTel: '',
  status: '',
  producterCode: '',
  producterPerson: '',
  producterAddress: ''
})
// 提示
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
const open = () => {
  ElMessageBox.alert(ti.value, '提示', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: 'OK',
    callback: (action: Action) => {
      ElMessage({
        type: 'info',
        message: `action: ${action}`,
      })
    },
  })
}
</script>
<template>
  <el-form :inline="true" class="demo-form-inline">
    <el-form-item label="厂家名称">
      <el-input placeholder="请输入厂家姓名" clearable v-model="form.producterName" />
    </el-form-item>
    <el-form-item label="关键字">
      <el-input placeholder="请输入关键字" clearable v-model="form.keywords" />
    </el-form-item>
    <el-form-item label="厂家电话">
      <el-input placeholder="请输入厂家电话" clearable v-model="form.producterTel" />
    </el-form-item>
    <el-form-item label="状态">
      <el-select placeholder="可用状态" clearable v-model="form.status">
        <el-option label="正常" value="0" />
        <el-option label="停用" value="1" />
      </el-select>
    </el-form-item>
    <el-form-item label="创建时间">
      <el-date-picker type="date" placeholder="创建时间" clearable v-model="form.createTime" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="select()">搜索</el-button>
    </el-form-item>
    <el-form-item>
      <el-button @click="reset()">重置</el-button>
    </el-form-item>
  </el-form>
  <div class="mb-4" style="margin-top: 5px;">
    <el-button type="primary" style="width: 200px;" @click="tiann()">+添加</el-button>
  </div>
  <!-- 表格 -->
  <el-table ref="multipleTableRef" :data="tableData" row-key="id" style="width: 100%">1
    <el-table-column type="selection" :selectable="selectable" width="55" @selection-change="handleSelectionChange" />
    <el-table-column property="producterId" label="ID" width="100" />
    <el-table-column property="producterName" label="厂家名称" width="300" />
    <el-table-column property="producterCode" label="厂家编号" />
    <el-table-column property="producterPerson" label="联系人" />
    <el-table-column property="producterTel" label="电话" />
    <el-table-column property="keywords" label="关键字" />
    <el-table-column label="状态">
      <template #default="scope">
        <span v-if="scope.row.status == 0">正常</span>
        <span v-else-if="scope.row.status == 1">停用</span>
      </template>
    </el-table-column>
    <el-table-column property="createTime" label="创建时间" />
    <el-table-column label="操作" #default="scope">
      <span style="color: red;" @click="update(scope.$index, scope.row)">修改</span>
    </el-table-column>
  </el-table>

  <div style="margin-top: 20px;"></div>
  <!-- 分页 -->
  <el-row justify="center">
    <el-col :span="12" :offset="6">
      <el-pagination background layout="prev, pager,next,total" :total="total" :page-size="pageSize"
        v-model:current-page="pageNum" @current-change="handleCurrentChange" />
    </el-col>
  </el-row>
  <!-- 修改框 -->
  <el-dialog v-model="dialogFormVisible" title="修改" width="800">
    <el-form :model="formm">
      <el-form-item label="厂家名称" :label-width="formLabelWidth" v-model="formm.producterName">
        <el-input v-model="formm.producterName" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="厂家编码" :label-width="formLabelWidth" v-model="formm.producterCode">
        <el-input v-model="formm.producterCode" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="联系人" :label-width="formLabelWidth" v-model="formm.producterPerson">
        <el-input v-model="formm.producterPerson" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth" v-model="formm.producterTel">
        <el-input v-model="formm.producterTel" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="关键字" :label-width="formLabelWidth" v-model="formm.keywords">
        <el-input v-model="formm.keywords" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth" v-model="formm.producterAddress">
        <el-input v-model="formm.producterAddress" autocomplete="off" style="width: 400px;" />
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-radio-group v-model="formm.status">
          <el-radio value="0">正常</el-radio>
          <el-radio value="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click=up()>修改</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加 -->
  <el-dialog v-model="tian" title="添加" width="800" :show-close="false">
    <el-form :model="formm">
      <el-form-item label="厂家名称" :label-width="formLabelWidth" v-model="formm.producterName">
        <el-input v-model="formm.producterName" autocomplete="off" style="width: 400px;" aria-required=""/>&nbsp;&nbsp;<span style="color: red;" v-html="kong.producterName"></span>
      </el-form-item>
      <el-form-item label="厂家编码" :label-width="formLabelWidth" v-model="formm.producterCode">
        <el-input v-model="formm.producterCode" autocomplete="off" style="width: 400px;" />&nbsp;&nbsp;<span style="color: red;" v-html="kong.producterCode"></span>
      </el-form-item>
      <el-form-item label="联系人" :label-width="formLabelWidth" v-model="formm.producterPerson">
        <el-input v-model="formm.producterPerson" autocomplete="off" style="width: 400px;" />&nbsp;&nbsp;<span style="color: red;" v-html="kong.producterPerson"></span>
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth" v-model="formm.producterTel">
        <el-input v-model="formm.producterTel" autocomplete="off" style="width: 400px;" />&nbsp;&nbsp;<span style="color: red;" v-html="kong.producterTel"></span>
      </el-form-item>
      <el-form-item label="关键字" :label-width="formLabelWidth" v-model="formm.keywords">
        <el-input v-model="formm.keywords" autocomplete="off" style="width: 400px;" />&nbsp;&nbsp;<span style="color: red;" v-html="kong.keywords"></span>
      </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth" v-model="formm.producterAddress">
        <el-input v-model="formm.producterAddress" autocomplete="off" style="width: 400px;" />&nbsp;&nbsp;<span style="color: red;" v-html="kong.producterAddress"></span>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-radio-group v-model="formm.status">
          <el-radio value="0">正常</el-radio>
          <el-radio value="1">停用</el-radio>
        </el-radio-group>&nbsp;&nbsp;<span style="color: red;" v-html="kong.status"></span>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click=tiaojian()>添加</el-button>
        <el-button type="primary" @click="qvxiao()">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
